<h2>{{ 'POLICY.PWD_LOCKOUT.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.PWD_LOCKOUT.DESCRIPTION' | translate }}</p>

<ng-template cnslHasRole [hasRole]="['policy.delete']">
  <button
    *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
    matTooltip="{{ 'POLICY.RESET' | translate }}"
    color="warn"
    (click)="resetPolicy()"
    mat-stroked-button
  >
    {{ 'POLICY.RESET' | translate }}
  </button>
</ng-template>

<cnsl-card *ngIf="lockoutData">
  <div class="lockout-content">
    <div class="row">
      <div class="length-wrapper">
        <button
          [disabled]="(['policy.write'] | hasRole | async) === false"
          mat-icon-button
          (click)="decrementPasswordMaxAttempts()"
        >
          <mat-icon>remove</mat-icon>
        </button>
        <span>{{ lockoutData.maxPasswordAttempts }}</span>
        <button
          [disabled]="(['policy.write'] | hasRole | async) === false"
          mat-icon-button
          (click)="incrementPasswordMaxAttempts()"
        >
          <mat-icon>add</mat-icon>
        </button>
      </div>

      <div class="number-toggle-row">
        <span class="left-desc">{{ 'POLICY.DATA.MAXPASSWORDATTEMPTS' | translate }}</span>
        <span class="fill-space"></span>
      </div>
    </div>
    <div class="row">
      <div class="length-wrapper">
        <button
          [disabled]="(['policy.write'] | hasRole | async) === false"
          mat-icon-button
          (click)="decrementOTPMaxAttempts()"
        >
          <mat-icon>remove</mat-icon>
        </button>
        <span>{{ lockoutData.maxOtpAttempts }}</span>
        <button
          [disabled]="(['policy.write'] | hasRole | async) === false"
          mat-icon-button
          (click)="incrementOTPMaxAttempts()"
        >
          <mat-icon>add</mat-icon>
        </button>
      </div>

      <div class="number-toggle-row">
        <span class="left-desc">{{ 'POLICY.DATA.MAXOTPATTEMPTS' | translate }}</span>
        <span class="fill-space"></span>
      </div>
    </div>
  </div>
</cnsl-card>

<div class="btn-container">
  <button
    (click)="savePolicy()"
    [disabled]="(['policy.write'] | hasRole | async) === false"
    color="primary"
    type="submit"
    mat-raised-button
  >
    {{ 'ACTIONS.SAVE' | translate }}
  </button>
</div>
